<template>
  <div class="box core-container">
    <div>
      <van-swipe :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="(item, index) in images" :key="index">
          <!-- <img v-lazy="item.image" /> -->
          <img :src="item.image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <div v-for="(item, index) in homelist" :key="index" class="listcenter">
        <span class="left">
          <img :src="item.cover" alt="" />
        </span>
        <span class="right">
          <span class="name">
            {{ item.name }}
          </span>
          <span class="stock">累计{{ item.stock }}份</span>
          <span class="price"
            >￥<span class="num">{{ item.price }}</span
            ><span class="car">加</span></span
          >
        </span>
      </div>
    </div>
    <!-- <div class="scroll-wrapper" ref="scroll">
      <div class="scroll-content ">
        <div
          class="scroll-item listcenter"
          v-for="(item, index) in homelist" :key="index" 
          @click="clickHandler(item)"
        >
        <span class="left">
          <img :src="item.cover" alt="" />
        </span>
        <span class="right">
          <span class="name">
            {{ item.name }}
          </span>
          <span class="stock">累计{{ item.stock }}份</span>
          <span class="price"
            >￥<span class="num">{{ item.price }}</span
            ><span class="car">加</span></span
          >
        </span>
        </div>
      </div>
    </div> -->
    <div class="block"></div>
  </div>
</template>

<script>
import { swiper, homelist } from "../../../api/api";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      // 轮播图照片
      images: [],
      // 首页列表
      homelist: [],
      // emojis: [
      //   "😀 😁 😂 🤣 😃",
      //   "😄 😅 😆 😉 😊",
      //   "😫 😴 😌 😛 😜",
      //   "👆🏻 😒 😓 😔 👇🏻",
      //   "😑 😶 🙄 😏 😣",
      //   "😞 😟 😤 😢 😭",
      //   "🤑 😲 🙄 🙁 😖",
      //   "👍 👎 👊 ✊ 🤛",
      //   "🙄 ✋ 🤚 🖐 🖖",
      //   "👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼",
      //   "☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽",
      //   "🌖 🌗 🌘 🌑 🌒",
      //   "💫 💥 💢 💦 💧",
      //   "🐠 🐟 🐬 🐳 🐋",
      //   "😬 😐 😕 😯 😶",
      //   "😇 😏 😑 😓 😵",
      //   "🐥 🐣 🐔 🐛 🐤",
      //   "💪 ✨ 🔔 ✊ ✋",
      //   "👇 👊 👍 👈 👆",
      //   "💛 👐 👎 👌 💘",
      //   "👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼",
      //   "☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽",
      //   "🌖 🌗 🌘 🌑 🌒",
      //   "💫 💥 💢 💦 💧",
      //   "🐠 🐟 🐬 🐳 🐋",
      //   "😬 😐 😕 😯 😶",
      //   "😇 😏 😑 😓 😵",
      //   "🐥 🐣 🐔 🐛 🐤",
      //   "💪 ✨ 🔔 ✊ ✋",
      //   "👇 👊 👍 👈 👆",
      //   "💛 👐 👎 👌 💘",
      // ],
    };
  },
  // mounted() {
  //   this.init();
  // },
  // beforeDestroy() {
  //   this.bs.destroy();
  // },
  created() {
    this.render();
    this.$nextTick(() => {
      // this.myBScroll = new BScroll(".container", {
      //   pullUpLoad: true,
      // });
      // this.myBScroll.on("pullUpLoad", () => {
      //   console.log("pullUpLoad");
      // });
    });
  },
  methods: {
    // init() {
    //   this.bs = new BScroll(this.$refs.scroll, {
    //     probeType: 3,
    //     click: true,
    //   });
    //   this.bs.on("scrollStart", () => {
    //     console.log("scrollStart-");
    //   });
    //   this.bs.on("scroll", ({ y }) => {
    //     console.log("scrolling-");
    //   });
    //   this.bs.on("scrollEnd", (pos) => {
    //     console.log(pos);
    //   });
    // },
    // clickHandler(item) {
    //   window.alert(item);
    // },
    render() {
      swiper().then((res) => {
        this.images = res.data.data;
      });
      homelist().then((res) => {
        console.log(res.data.data.data.length);
        this.homelist = res.data.data.data;
      });
    },
  },
};
</script>

<style lang="less" lang="stylus" rel="stylesheet/stylus" scoped>
// .core-container
//   .scroll-wrapper
//     height 400px
//     position relative
//     overflow hidden
//     .scroll-item
    //   height 50px
    //   line-height 50px
    //   font-size 24px
    //   font-weight bold
    //   border-bottom 1px solid #eee
      // text-align center
    //   &:nth-child(2n)
    //     background-color #f3f5f7
    //   &:nth-child(2n+1)
    //     background-color #42b983
.block {
  height: 30px;
}
.listcenter {
  padding: 20px;
  overflow: hidden;
  /* height: 100px; */
}
img {
  width: 100%;
  height: 150px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.left img {
  width: 100px;
  height: 100px;
  float: left;
}
.right {
  display: flex;
  flex-direction: column;
  padding-left: 5px;
}
.name {
  font-weight: bold;
  margin-top: 10px;
}
.stock {
  font-size: 10px;
  color: #ccc;
  margin-top: 10px;
}
.price {
  color: red;
  font-size: 10px;
  margin-top: 10px;
}
.num {
  font-size: 17px;
  font-weight: bold;
}
.car {
  float: right;
  font-size: 17px;
}
</style>